<template>
	<view class="main" v-if="roleType == 1">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<image src="../../static/images/banner.png" mode="widthFix" style="width: 750upx;"></image>
				</view>
			</view>
		</view>
		<view class="main_content">
			<view class="title">
				正在進行
			</view>
			<view class="content" v-for="item in list">
				<questionnaire :title="item.title" :content="item.content" :time="item.createTime"  :deadline="item.endTime"
				:teacher="item.publisherName" ></questionnaire>
			</view>
			<u-loadmore :status="status"  margin-top="15" margin-bottom="15"/>
		</view>
	</view>
	
	<view class="main" v-else-if="roleType == 2">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<image src="../../static/images/banner.png" mode="widthFix" style="width: 750upx;"></image>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="middle_container">
				<view class="big_box left-radius">
					<view class="middle_box">
						<view class="font_big">
							管理班級
						</view>
						<view class="font_small">
							管理已加入班級
						</view>
					</view>
					<view class="image_box">
						<image src="../../static/images/ClassManagement.png" mode=""></image>
					</view>
				</view>
				<navigator class="big_box right-radius" url="../addClass/addClass">
					<view class="middle_box left_line left_middle_box">
						<view class="font_big ">
							加入班級
						</view>
						<view class="font_small">
							加入其他班級
						</view>
					</view>
					<view class="image_box">
						<image src="../../static/images/JoinClass.png" mode=""></image>
					</view>
				</navigator>
			</view>
			<view class="middle_title">
				正在進行
			</view>
			<uni-card :title="item.title" mode="title" :subTitle="item.createTime" :is-shadow="true"
				thumbnail="/static/icon/Questionnaire.png" thumb-width="100" v-for="item in list" :key="item.id">
				<view class="outer-wrap" @click="toQuestionnaire(item.id)">
					<view class="left-area">
						<view class="font_wenjuan">
							{{item.commitNum}}
						</view>
						<view class="font_sub">
							已提交
						</view>
					</view>
					<view class="middle-area">
						<view class="font_wenjuan">
							{{item.unCommitNum}}
						</view>
						<view class="font_sub">
							未提交
						</view>
					</view>
					<view class="left-area">
						<view class="">
							<u-circle-progress active-color="#2979ff" :percent="item.percent" width="90" border-width="7">
									<view class="u-progress-content">
										<text class='u-progress-info'>{{item.percent}}%</text>
									</view>
							</u-circle-progress>
						</view>
						<view class="font_sub">
							提交率
						</view>
					</view>
				</view>
				<view class="foot">
					班級：{{item.classesName}}
					<view style="float: right;" @click="add(item.id,item.classesName)">
						...
					</view>
				</view>
			</uni-card>
			<u-loadmore :status="status"  margin-top="15" margin-bottom="15"/>
		</view>
	</view>
</template>

<script>
	// import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import questionnaire from "@/components/questionnaire.vue"
	export default {
		components: {
			questionnaire
		},
		// components: {cmdProgress},
		data() {
			return {
				roleType: 0,
				
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				list: [],
				
				current: 1,
				size: 5,
				pages: 0,
				status: 'loading',
				
				teacher: '陳大文',
				deadline: '2020-10-30',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			this.roleType = uni.getStorageSync("roleType")
			if(this.roleType == 1){
				this.getOnGongingVotingByStudent()
			}else if(this.roleType == 2){
				this.getOnGongingVotingByTeacher()
			}else if(this.roleType == 0){
				console.log("我是00000");
				setTimeout(()=>{
					this.roleType = uni.getStorageSync("roleType")
					if(this.roleType == 1){
						this.getOnGongingVotingByStudent()
					}else if(this.roleType == 2){
						this.getOnGongingVotingByTeacher()
					}
				},1000)
			}
		},
		onShow() {
			if(this.roleType == 2){
				this.current = 1
				this.list = []
				this.getOnGongingVotingByTeacher().then(() => {
					uni.stopPullDownRefresh()
				})
			}
		},
		onReachBottom(){
			if(this.current >= this.pages) return;
			this.status = 'loading';
			this.current++;
			if(this.roleType == 1){
				this.getOnGongingVotingByStudent().then(() => {
					if(this.current >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				})
			}else if(this.roleType == 2){
				this.getOnGongingVotingByTeacher().then(() => {
					if(this.current >= this.pages) this.status = 'nomore';
					else this.status = 'loading';
				})
			}
			
		},
		onPullDownRefresh(){
			this.current = 1
			this.list = []
			if(this.roleType == 1){
				this.getOnGongingVotingByStudent().then(() => {
					uni.stopPullDownRefresh()
				})
			}else if(this.roleType == 2){
				this.getOnGongingVotingByTeacher().then(() => {
					uni.stopPullDownRefresh()
				})
			}
		},
		methods: {
			add(id,classesName) { //底部上拉菜单
				var that = this
				uni.showActionSheet({
					itemList: ['分享', '編輯', '刪除'],
					 success: res => {
						switch(res.tapIndex){
							case 0: 
								console.log("1111");
								break;
							case 1:
								uni.navigateTo({
								    url: '/pages/vote/vote?id='+id+"&className="+classesName
								});
								break;
							case 2:
								uni.showModal({
									title: '提示',
									content: '是否确认删除?',
									success: res =>  {
										if (res.confirm) {
											this.$myRequest({
												url: '/voting/delete/'+id,
												method: 'POST',
											}).then(res => {
												uni.showToast({
													icon: 'none',
													title: '删除成功'
												})
												this.pageRefresh()
											})
										}
									}
								});
								break;
						}
					},
				})
			},
			toQuestionnaire(id){
				uni.navigateTo({
					url:'../questionnaire/questionnaire?id='+id
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			async getOnGongingVotingByTeacher(){
				const res = await this.$myRequest({
					url: "/voting/getOnGongingVotingByTeacher",
					data: {
						current: this.current,
						size: this.size
					}
				})
				res.data.data.records.forEach(r => {
					r.classesName = r.classes.map(c => {
						return c.grade.year+c.grade.name+c.name
					}).join(",")
					r.percent = Math.ceil(Math.random()*100)
				})
				this.list = [...this.list, ...res.data.data.records]
				
				// 获取页数
				this.pages = res.data.data.pages
				if(this.current >= this.pages){
					this.status = 'nomore'
				}
			},
			async getOnGongingVotingByStudent(){
				const res = await this.$myRequest({
					url: "/voting/getOnGongingVotingByStudent",
					data: {
						current: this.current,
						size: this.size
					}
				})
				this.list = [...this.list, ...res.data.data.records]
				
				// 获取页数
				this.pages = res.data.data.pages
				if(this.current >= this.pages){
					this.status = 'nomore'
				}
				
				console.log(this.list);
			}

		},
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	.main {
		padding-bottom: 100upx;
	}
	
	/* #endif */
	.main_content {
		padding: 0 30upx;
	
		.title {
			margin: 30upx 0;
			font-size: 40upx;
			font-weight: bold;
		}
	
		.content {
			margin: 0 auto;
		}
	
	}
	/deep/.uni-card__title-header{
		width: auto !important;
	}
	/deep/.uni-card__title-content-extra:before{
		content:"發佈於 "; color: rgb(93,144,274);
	}
	.u-progress-content {
		display: flex;
		align-items: center;
		justify-content: center;
		.u-progress-info {
			font-size: 22rpx;
		}
	}
	.main{
		height: 100%;
	}
	// 中间管理班级的那些样式
	.middle_container {
		width: 95%;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 20upx;
		display: flex;
		flex-direction: row;
		box-shadow: 0 0 40px #dcdddd;
	}

	.big_box {
		width: 50%;
		padding: 30upx 0;
		display: flex;
		justify-content: space-around;
		image {
			height: 120upx;
			width: 120upx;
			vertical-align: middle;
		}
	}

	.left-radius{
		border-right: 1px solid #d4d4d4;
	}

	.middle_box {
		float: left;
	}

	.font_big {
		font-size: 36upx;
		font-weight: 600;
	}

	.font_small {
		margin-top: 20upx;
		font-weight: 200;
		font-size: 20upx;
		color: #939393;
	}

	.title {
		font-size: 34upx;
		font-weight: 600;
	}

	.little_title {
		margin-top: 12upx;
		font-weight: 400;
		font-size: 25upx;
		color: #939393;
	}

	.content {
		margin-top: 20upx;
		padding-bottom: var(--window-bottom);
	}

	.last_time {
		color: #808080;
		margin: 10upx 0;
	}

	.foot {
		padding-top: 24rpx;
		border-top: 1upx solid #f7ecf0;
	}

	.left_set {
		float: left;
	}

	.border_left {
		margin: 4px 0 0 -86px;
		height: 47px;
		border-left: 1px solid #d0c6ca;
	}

	.middle_title {
		margin: 30upx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.uni-progress-bar {
		font-size: 60upx;
	}

	// .u-progress-info {
	// 	font-size: 28rpx;
	// 	padding-left: 16rpx;
	// 	letter-spacing: 2rpx;
	// }

	.outer-wrap {
		display: flex;
		justify-content: space-around;
		width: 100%;
		padding-bottom: 50upx;
	}
	
	.left-area{
		text-align: center;
	}
	
	.font_wenjuan {
		font-size: 50upx;
		height: 90rpx;
		padding: 8upx;
		margin-left: 2%;

	}

	.font_sub {
		color: #7e7c7c;
		margin-left: 0%;

	}

	.right-area {
		margin-top: 4%;
	}

	.right-area .font_sub_top {
		margin-top: 14%;
	}
</style>
